import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pinput/pinput.dart';
import 'package:ball_lion/module/mine/login_logic.dart';
import 'package:ball_lion/resources/colours.dart';
import 'package:ball_lion/resources/styles.dart';
import 'package:ball_lion/widgets/base/wqs_text.dart';
import 'package:ball_lion/utils/utils.dart';

class MyLoginVerifyPage extends StatefulWidget {
  const MyLoginVerifyPage({super.key});

  @override
  State<MyLoginVerifyPage> createState() => _MyLoginVerifyPageState();
}

class _MyLoginVerifyPageState extends State<MyLoginVerifyPage> {
  final logic =
      Get.find<LoginLogic>(tag: Get.arguments == LoginType.bind ? '1' : '0');
  final focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      FocusScope.of(context).requestFocus(focusNode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: Styles.appBar(backgroundColor: Colours.transparent),
      body: SafeArea(
          top: false,
          child: Column(children: [
            SizedOverflowBox(
                size: const Size(0, 188),
                alignment: Alignment.topCenter,
                child: Image.asset(
                  Utils.getImgPath('login_header.png'),
                  fit: BoxFit.cover,
                  width: Get.width,
                  height: 200,
                )),
            Container(
                clipBehavior: Clip.antiAlias,
                padding: const EdgeInsets.symmetric(horizontal: 40),
                decoration: const BoxDecoration(
                    color: Colours.white,
                    borderRadius:
                        BorderRadius.vertical(top: Radius.circular(12))),
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      const SizedBox(height: 40),
                      const QsText('输入验证码',
                          fontSize: 20, fontWeight: FontWeight.w500),
                      const SizedBox(height: 4),
                      Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          const QsText('验证码已发送：', color: Colours.grey66),
                          QsText(logic.phoneNumber!,
                              color: Colours.grey66,
                              fontWeight: FontWeight.w500),
                        ],
                      ),
                      const SizedBox(height: 32),
                      codeWidget(),
                      const SizedBox(height: 20),
                      timerWidget()
                    ])),
          ])),
    );
  }

  Widget codeWidget() {
    final defaultPinTheme = PinTheme(
      width: 44,
      height: 56,
      textStyle: const TextStyle(fontSize: 28, color: Colours.text),
      decoration: BoxDecoration(
          border: Border.all(color: Colours.grey99),
          borderRadius: BorderRadius.circular(4)),
    );
    final focusPinTheme = PinTheme(
      width: 44,
      height: 56,
      textStyle: const TextStyle(fontSize: 28, color: Colours.text),
      decoration: BoxDecoration(
          border: Border.all(color: Colours.main),
          borderRadius: BorderRadius.circular(4)),
    );
    return Pinput(
      focusNode: focusNode,
      length: 6,
      pinAnimationType: PinAnimationType.fade,
      defaultPinTheme: defaultPinTheme,
      focusedPinTheme: focusPinTheme,
      showCursor: true,
      cursor: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            width: 2,
            height: 20,
            decoration: const BoxDecoration(color: Colours.main),
          ),
        ],
      ),
      onCompleted: (code) => logic.doLogin(code),
    );
  }

  Widget timerWidget() {
    return Obx(() => GestureDetector(
          onTap: () {
            if (logic.currentTime == 0) {
              logic.resendSms();
            }
          },
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 12),
            child: QsText(
              logic.currentTime == 0 ? '重发验证码' : '重发验证码（${logic.currentTime}秒）',
              color: logic.currentTime == 0 ? Colours.main : Colours.grey99,
              fontSize: 14,
            ),
          ),
        ));
  }
}
